<template>
  <div id="welcome">
    <!--面板-->
    <div class="layui-panel">
      <el-row>
        <el-col :span="24">
          <div>
            <p style="color: #f8ac59;">
              vue-botao-admin，基于Vue2、ElementUI的一款简洁清新的后台管理系统模板，简单易用。
            </p>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--统计-->
    <el-row :gutter="20">
      <el-col :span="6" :xs="24" :sm="12" :md="6">
        <div class="info-item">
          <div>
            <i class="el-icon-chat-dot-square"></i>
          </div>
          <div>
            <h2>消息统计:</h2>
            <p>1157</p>
          </div>
        </div>
      </el-col>
      <el-col :span="6" :xs="24" :sm="12" :md="6">
        <div class="info-item">
          <div>
            <i class="el-icon-s-custom"></i>
          </div>
          <div>
            <h2>用户统计:</h2>
            <p>1157</p>
          </div>
        </div>
      </el-col>
      <el-col :span="6" :xs="24" :sm="12" :md="6">
        <div class="info-item">
          <div>
            <i class="el-icon-picture"></i>
          </div>
          <div>
            <h2>图片统计:</h2>
            <p>1157</p>
          </div>
        </div>
      </el-col>
      <el-col :span="6" :xs="24" :sm="12" :md="6">
        <div class="info-item">
          <div>
            <i class="el-icon-bell"></i>
          </div>
          <div>
            <h2>通知统计:</h2>
            <p>1157</p>
          </div>
        </div>
      </el-col>
    </el-row>

    <br>
    <!--图表-->
    <el-row :gutter="20">
      <el-col :span="8" :xs="24" :sm="24" :md="8">
        <el-card>
          <div ref="chartLeft" class="chart-panel"></div>
        </el-card>
      </el-col>
      <el-col :span="8" :xs="24" :sm="24" :md="8">
        <el-card>
          <div ref="chartCenter" class="chart-panel"></div>
        </el-card>
      </el-col>
      <el-col :span="8" :xs="24" :sm="24" :md="8">
        <el-card>
          <div ref="chartRight" class="chart-panel"></div>
        </el-card>
      </el-col>
    </el-row>
    <!--百度搜索-->
    <el-card class="box-card" style="margin-top: 15px;">
      <div slot="header" class="clearfix">
        <span>百度搜索</span>
      </div>
      <!--百度搜索-->
      <BaiduSearch/>
    </el-card>
    <!--快捷功能菜单-->
    <el-card class="box-card" style="margin-top: 15px;">
      <div slot="header" class="clearfix">
        <span>快捷功能菜单</span>
      </div>
      <IMenu/>
    </el-card>
  </div>
</template>

<script>
import IMenu from "@/components/menu/IMenu";
import BaiduSearch from "@/components/search/BaiduSearch";
export default {
  name: "Welcome",
  data() {
    return {
    }
  },
  components: {IMenu,BaiduSearch},
  mounted() {
    this.init();
  },
  methods: {
    chartLeft() {
      const myChart = echarts.init(this.$refs.chartLeft);
      const option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      return this;
    },
    chartCenter() {
      const myChart = echarts.init(this.$refs.chartCenter);
      const option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [{
          name: 'Pressure',
          type: 'gauge',
          detail: {
            formatter: '{value}'
          },
          data: [{
            value: Math.floor(Math.random() * 100),
            name: ''
          }]
        }]
      };
      myChart.setOption(option);
      return this;
    },
    chartRight() {
      const myChart = echarts.init(this.$refs.chartRight);
      const option = {
        title: {
          text: 'ECharts 入门示例'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true
        }]
      };
      myChart.setOption(option);
      return this;
    },
    init() {
      this.chartLeft().chartCenter().chartRight();
    },
  }
}
</script>

<style scoped lang="scss">
h2 {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 2px;
  margin: 8px 0;
  color: #00a1ff;
}

.info-item {
  width: 100%;
  height: 80px;
  background-color: #f5f5f5;
  border-radius: 5px;
  display: flex;
  margin: 5px;
  overflow: hidden;

  & > div:nth-child(1) {
    background-color: #56b2fc;
    border-radius: 5px;
    flex: 1;

    i {

      color: #ececec;
      cursor: pointer;
      line-height: 80px;
      text-align: center;
      font-size: 50px;
      width: 100%;
      height: 100%;
    }
  }

  & > div:nth-child(2) {
    flex: 3;
    color: #00a1ff;
    overflow: hidden;

    h2 {
      margin: 5px;
      font-size: 16px;
    }

    p {
      margin: 5px 30px;
      text-align: right;
      font-size: 32px;
    }
  }
}

.chart-panel {
  min-height: 280px;
  width: 100%;
  margin: 15px;
}


</style>